<template>
    <div class="tabitem" @click="clickItem">
       <span v-show="!flag"><slot name="normalImg"></slot></span>
       <span v-show="flag"><slot name="activeImg"></slot></span>
       <span class="title" :class="{active:flag}">{{txt}}</span>
    </div>
</template>
<script>
export default {
    props:["txt","mark","sel"],
    methods:{
        clickItem(){
            //this.changeSelect(this.mark);
            this.$emit("changeSelect",this.mark);
            //编程式导航
            this.$router.push("/"+this.mark);
        }
    },
    //思路  给每个tableitem做标识 home record mine
    computed:{
        flag(){
            if(this.sel === this.mark){
                return true;
            }
            return false;
        }
    }
}
</script>
<style lang="scss" scoped>
    .tabitem{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .title{
            position: relative;
                top: -0.4rem;
            font-family: 'PingFangSC-Regular';
            font-size: 0.1rem;
            
            &.active{
                color: #44c5ad;
            }
        }
        span{
            padding-top: 0.06rem;
        }
        // img{
        //     width:0.3rem;
        // }
    }
</style>